<template>
	<div class="top_stock">
		<ul>
			<li v-for="(item, index) in stockData" :class="item.stock_rate_type">
				<router-link :to="{path:'/stock-detail:id',param:'{{item.stock_id}}'}">
					<h1>{{item.stock_value}}<span :class="item.stock_rate_type"></span></h1>
					<p><span>{{item.stock_name}}</span><span>{{item.stock_rate}}%</span></p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "Stock",
		props:["stocks"],
		data: function(){
			return {
				stockData:[]
			}
		},
		created: function(){
			var that = this;
			that.$http.jsonp(this.$store.state.api.stockDataApi.tmpl({
				stocks: this.stocks.join(',')
			})).then(function(res){
				//console.log(res);
				let data = [];
				res.body.Data[0].forEach(function(item){
					data.push({
						stock_id: item[0],
						stock_value: (item[3]/item[7]).toFixed(2),
						stock_rate_type: item[4]>0?"up":"down",
						stock_name: item[2],
						stock_rate: (item[4]>0?"+":"-")+(item[4]/100).toFixed(2)
					})
				});
				//console.log(data)
				that.$set(that, "stockData", data);
			}, function(){
				
			})
		}
	}
</script>

<style lang="less">
	@base: 23.44/1rem;
	.top_stock{
		margin:10/@base 0 0;
		ul{
			display:flex;
			li{
				width:33.33%;
				overflow: hidden;
				color:#fff;
				padding:20/@base 5/@base;
				font-weight: 700;
				&:first-child{
					margin-right:2/@base;
				}
				&:last-child{
					margin-left:2/@base;
				}
				&.up{
					background-color: #ff0000;
				}
				&.down{
					background-color: #00ff00;
				}
				a{
					display:block;
					color:#fff;
					text-align: center;
					h1{
						font-size:30/@base;
						span{
							margin-left:10/@base;
						}
					}
					p{
						display:flex;
						span{
							font-size: 12/@base;
							width:50%;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
</style>
